<template>
  <div id="article" ref="article">
    <h1 id="articleTheme">{{ this.$route.query.theme }}</h1>
    <p id="articleIntroduce">{{ this.$route.query.introduction }}</p>
    <div class="mark">
      <div v-html="compiledMarkdown" class="markdown-body" ref="markBody"></div>
      <NotMore></NotMore>
    </div>
    <toTop v-show="show"></toTop>
    <span id="directory" @click="showDirectory()" title="目录"></span>
    <!-- 目录 -->
    <div id="directoryBar" ref="directoryBar" style="overflow: scroll;">
      <a class="directoryLi" v-for="(item, index) in directoryList" :key="index" :href="'#' + item.id"
        :style="{ paddingLeft: item.tagName.slice(-1) * 15 + 'px' }">{{ item.textContent }}</a>
    </div>
  </div>
</template>

<script>
// 导入marked
import { marked } from 'marked'
import hljs from "highlight.js";
import toTop from '@/components/reusable/toTop.vue'; // 回到顶部
import NotMore from '@/components/reusable/NotMore.vue';
export default {
  data() {
    return {
      articleContent: '<div id="loading"><i class="el-icon-loading"></i></div><h1 style="text-align: center;">请稍后，内容正在加载...</h1> <h1 style="text-align: center;">X.X</h1>',
      directoryList: [{
        textContent: '抱歉，无法识别文章目录X.X',
        tagName: '0'
      }],
      // 控制目录显示/隐藏
      directoryShow: false,
      // 控制回到顶部按钮显示/隐藏
      show: false,
    }
  },
  components: {
    toTop , NotMore
  },
  methods: {
    // 展示目录
    showDirectory() {
      // 目录只有默认数据
      if (this.directoryList.length <= 1) {
        // 获取目录
        this.directoryList = document.querySelectorAll('h1,h2,h3,h4,h5,h6')
      }
      // 目录正在展示
      if (this.directoryShow) {
        // 设置目录Bar宽度
        this.$refs.directoryBar.style.width = '0'
        // 设置目录Bar透明度
        this.$refs.directoryBar.style.opacity = '0'
        this.directoryShow = !this.directoryShow
      } else {
        // 设置目录Bar宽度
        this.$refs.directoryBar.style.width = '20%'
        // 设置目录Bar透明度
        this.$refs.directoryBar.style.opacity = '1'
        this.directoryShow = !this.directoryShow
      }
    },
    // 判断当前高度，是否显示回到顶部按钮
    toTopShow() {
      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        this.show = true
      } else {
        this.show = false
      }
    },
    // 获取文章内容
    getArticleContent() {
      // 获取文章内容
      this.$axios({
        methods: "post",
        url: "/article/getArticleContent/" + this.$route.query.id
      }).then(res => {
        this.articleContent = res.data
      })
      // 判断当前样式，来引入不同的代码高亮样式
      setTimeout(() => {
        // 亮色样式
        if (this.$route.query.light == 'true') {
          // 引入代码块的代码高亮样式,在/highlight.js/styles/下找的
          require('highlight.js/styles/github.css')
        } else {
          // 暗色样式
          require('highlight.js/styles/srcery.css')
        }
      }, 100)
    }
  },
  computed: {
    // 渲染markdown内容
    compiledMarkdown() {
      var rendererMD = new marked.Renderer();
      marked.setOptions({
        renderer: rendererMD,
        gfm: true, //允许Git Hub标准的markdown.
        tables: true, //允许支持表格语法。该选项要求 gfm 为true
        breaks: true, //允许回车换行。该选项要求 gfm 为true
        highlight: function (code) {
          return hljs.highlightAuto(code).value;
        },
      });
      return marked(this.articleContent);
    },
  },
  mounted() {
    // 获取文章内容
    this.getArticleContent()
    // 绑定滚动事件，判断是否显示回到顶部按钮
    window.onscroll = this.toTopShow;
    // 获取当前屏幕高度，并设置leftBar的最小高度为一个屏幕高度 (减去30是因为window.innerHeight大于一个屏幕高度，目测感觉减30刚刚好)
    this.$refs.article.style.minHeight = window.innerHeight + 'px'
    console.log(this.$refs.markBody.children);
  },
}
</script>

<style lang="scss">
#app {
  display: block;
}

#article {
  width: 1000px;
  margin: 0 auto;
  background-color: $color-list;
  min-height: 1000px;
  border: 1px solid $color-background;
  overflow: hidden;
}

#articleTheme {
  font-size: $font-size-large;
  font-weight: $font-weight-large;
  color: $color-main-text;
  margin: 30px;
  // 设置文本换行显示
  word-wrap: break-word;
  word-break: break-all;
}

#articleIntroduce {
  font-size: $font-size-small;
  font-weight: $font-weight-small;
  width: 85%;
  margin: 20px auto;
  // 设置文本换行显示
  word-wrap: break-word;
  word-break: break-all;
}

// 文章中图片居中类
.articleImg {
  display: block;
  margin: 0 auto;
}

// 文章内容
.mark {
  width: 90%;
  margin: 20px auto;
}

/* 代码块和引用块的样式 blockquote */
.markdown-body pre,
.markdown-body blockquote {
  background: $color-background-assistant;
  margin: 20px;
  padding: 10px;
  overflow: auto;
  padding: 5px;
  font-size: $font-size-x-small;
  color: $color-main-text;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .2);
}
.markdown-body pre {
  border-radius: 10px;
  position: relative;
}

.markdown-body blockquote {
  font-size: large;
  border-left: rgba(0, 0, 0, 0.4) solid 8px;
}

/* 滚动条样式 */
/*定义滚动条样式（高宽及背景）*/
.markdown-body pre::-webkit-scrollbar,
.markdown-body blockquote::-webkit-scrollbar {
  width: 10px;
  /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
  height: 10px;
  background: $color-background-assistant;
}

/*定义滚动条轨道（凹槽）样式*/
.markdown-body pre::-webkit-scrollbar-track,
.markdown-body blockquote::-webkit-scrollbar-track {
  margin-top: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

/*定义滑块样式*/
.markdown-body pre::-webkit-scrollbar-thumb,
.markdown-body blockquote::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
}

/* 分隔线的样式 */
.markdown-body hr {
  margin: 20px 10px;
}

/* h1和h2的样式 */
.markdown-body h1,
.markdown-body h2 {
  margin: 8px 0 16px 0;
  color: $color-main-text;
}

/* h3,h4,h5,h6的样式 以及段落样式 */
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
.markdown-body p {
  margin: 8px 0 8px 0;
}

/* 表格样式 */
.markdown-body table {
  border: .5px solid #fff;
  border-bottom: none;
  margin: 10px auto;
}

/* 表头 */
.markdown-body table thead tr th {
  border-right: .5px #fff solid;
  border-bottom: .5px #fff solid;
}

.markdown-body table thead tr th:last-child {
  border-right: none;
}

/* 表身 */
.markdown-body table tbody tr td {
  border-right: .5px #fff solid;
  border-bottom: .5px #fff solid;
}

.markdown-body table tbody tr td:last-child {
  border-right: none;
}

.markdown-body th,
.markdown-body td {
  padding: 5px;
}

/* 超链接样式 */
.markdown-body a {
  color: #4ea1db;
}

/* 列表样式 */
.markdown-body ul,
.markdown-body ol {
  margin: 20px 0 20px 20px;
}

.markdown-body li {
  margin: 8px 0;
}

.markdown-body ul>li::marker {
  content: ' ● ';
}

/* 加粗以及倾斜的字体样式 */
.markdown-body strong,
.markdown-body em {
  margin-right: 5px;
  margin-left: 5px;
}

// ``(markdown语法) 的样式
.markdown-body code {
  background-color: $color-background-assistant;
  padding: 5px;
  margin:  0 2px 0 2px;
}

// 代码块中文本的样式(为了覆盖`` 的background样式)
.markdown-body pre code {
  background-color: rgba(255, 255, 255, 0);
}

// 设置图片大小限制
.markdown-body img {
  display: block;
  max-width: 900px;
  object-fit: contain;
  margin: 10px auto;
}

// 设置h3,h4颜色
.markdown-body h3,
.markdown-body h4 {
  margin: 8px 0 8px 0;
  color: $color-main-text;
}

// 回到最上方
#toTop,
#directory {
  background-color: $color-background-assistant;
  color: $color-main-text;
  font-size: $font-size-medium;
  position: fixed;
  bottom: 50px;
  right: 100px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  z-index: 99;
}

// 目录按钮
#directory {
  bottom: 120px;
}

#directoryBar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  opacity: 0;
  background-color: rgba($color: #000000, $alpha: .3);
  padding: 10px 5px 10px 10px;
  transition: all .5s;
  overflow: hidden;
}

// 隐藏目录bar的滚动条
#directoryBar::-webkit-scrollbar {
  // display: none;
  width: 2.5px;
}

.directoryLi {
  display: block;
  color: $color-main-text;
}

.directoryLi:hover {
  background-color: $color-background-assistant;
}
// 加载图标
i {
  font-size: $font-size-large;
  font-weight: $font-weight-large !important;
  color: #fff;
}
#loading {
  text-align: center;
}
</style>